<template>
  <div ref="editorRef" />
</template>

<script>
import E from 'wangeditor'
export default {
  name: 'WangEditor',
  props: {
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: ''
    }
  },
  watch: {
    content() {
      this.editor.txt.html(this.content)
    }
  },
  mounted() {
    const editor = new E(this.$refs.editorRef)
    this.editor = editor // 保存创建的实例
    //     通过onchange方法来监听编辑器中内容的变化，但是由于子组件不能直接更改父组件的内容，
    // 我使用$emit方式来触发父组件自定义的方法来修改数据。
    // 在初始化代码中添加：
    editor.config.onchange = function(newHtml) {
      if (newHtml) {
        this.$emit('update:content', newHtml)
      }
    }.bind(this)

    editor.create()
  }
}

</script>

<style>

</style>
